<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-08-26 14:57:33
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-09-19 15:44:15
 * @FilePath: \orderApp\packageOne\pages\personalInfo\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<route lang="json5" type="page">
{
  layout: "default",
  style: {
    navigationStyle: "custom",
    navigationBarTextStyle: "black",
  },
}
</route>

<template>
  <view class="">
    <cu-navbar title="我的点菜" class="con"></cu-navbar>
    <view class="myDish">
      <cu-slider :list="dishListInfo" :height="navHeight">
        <template v-slot:default="{ data, index }">
          <scroll-view
            v-if="data.dishsList.length"
            class="height"
            :style="{ '--height': navHeight + 'px' }"
            :scroll-y="true"
            @scrolltolower="scrolltolower(index)"
          >
            <view>
              <view class="dishBox" v-for="(it, ind) in data.dishsList" :key="ind">
                <view class="sort">
                  {{ ind + 1 }}
                </view>

                <view class="dish">
                  <uv-image
                    :src="it.dishUrl"
                    radius="4rpx"
                    width="115rpx"
                    height="115rpx"
                    :observeLazyLoad="true"
                  ></uv-image>
                  <view class="dish-name">{{ it.dishName }}</view>
                </view>
                <view class="dish-right">
                  <view v-if="index" class="time">{{it.time}}</view>
                  <uv-button
                    v-else
                    :custom-style="{
                      width: '115rpx',
                      height: '46rpx',
                      borderRadius: '73rpx',
                    }"
                    color="#006543"
                    text="取消"
                  ></uv-button>
                </view>
              </view>
              <uv-load-more v-if="data.dishsList.length > 9" :status="data.status" />
            </view>
          </scroll-view>
          <cu-empty v-else></cu-empty>
        </template>
      </cu-slider>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useUserStore } from "@/store";
import { getMyOrderDish } from "@/service/business/orderingDishes/index";
import {getCurrentInstance} from 'vue';
	const { ctx } = getCurrentInstance();
const userStore = useUserStore();
// 获取高度
const navHeight = ref(0);

const getHeight = () => {
  const instance = getCurrentInstance();
  const query = uni.createSelectorQuery().in(instance);
  query
    .select(".con")
    .boundingClientRect((data) => {
      navHeight.value = data.height;
    })
    .exec();
};

const dishListInfo = ref([
  {
    name: "下周点菜",
    id: 0,
    pages: {
      pageSize: 10,
      page: 1,
    },
    dishsList: [],
    status: "loading",
  },
  {
    name: "全部点菜",
    id: 1,
    pages: {
      pageSize: 10,
      page: 1,
    },
    dishsList: [],
    status: "loading",
  },
]);
const dishsList = ref([]);
function scrolltolower(index) {
  if (dishListInfo.value[index].status != "nomore") {
    dishListInfo.value[index].pages.page++;
    getMyOrderDishApi(1, index);
  }
}

//  index 0 下周点菜， 1 全局
const getMyOrderDishApi = async (index) => {
  uni.showLoading();
  let res = await getMyOrderDish({
    size: dishListInfo.value[index].pages.pageSize,
    current: dishListInfo.value[index].pages.page,
    userId: userStore.userInfo.user.userId,
    sign: index,
  });
  uni.hideLoading();
  if (res.retCode === 2000) {
    let list = res.data.map(el=>{
      el.time = ctx.$uv.timeFormat( el.submitTime)
      return el
    })
    dishListInfo.value[index].dishsList.push(...list);

    if (dishListInfo.value[index].dishsList.length === res.total) {
      dishListInfo.value[index].status = "nomore";
    } else {
      dishListInfo.value[index].status = "loading";
    }
    console.log(dishListInfo.value);
  }
};
onMounted(() => {
  getHeight();
  getMyOrderDishApi(0);
  getMyOrderDishApi(1);
});
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  align-items: center;
  height: 140rpx;
  margin-top: 1px;
  margin-bottom: 15.38rpx;
  background: #fff;
}
.height {
  height: calc(100vh - var(--height) - 216.92rpx);
}
.content {
  display: inline-block;
  width: calc(100% - 30.77rpx);
  height: calc(100vh - var(--height) - 216.92rpx);
  padding: 30.77rpx;
  padding-right: 0;
  background: #fff;
  .dishBox {
    display: flex;
    align-items: center;
    padding-top: 11.54rpx;
    padding-bottom: 11.5rpx;
    border-bottom: 1px solid #f3f3f5;
    .sort {
      min-width: 38rpx;
      font-weight: 600;
      font-size: 31rpx;
      margin-right: 30.77rpx;
      color: #595a5b;
    }
    .dish {
      flex: 1;
      display: flex;
      align-items: center;
      &-name {
        flex: 1;
        margin-left: 15.38rpx;
        font-weight: 400;
        font-size: 31rpx;
        color: #111111;
      }
      &-right {
        padding-right: 30.77rpx;
        .time {
          width: 150rpx;
          display: flex;
          font-size: 24rpx;
          align-items: center;
          justify-content: center;
          text-align: center;
        }
      }
    }
  }
}
</style>
